import React from 'react';
import $ from 'jquery';
import _ from 'lodash';
import { Row, Col, Steps } from 'antd';
import { connect } from 'react-redux'
const Step = Steps.Step;
import {check_rules,login,fetchAttachByEntry,fetchAttachById,API_URL} from '../../store/actions';
import { CheckMobBySms,SubmitCode, FillInfo, FeedBack } from '../../components/formSmsReg';
import Header from '../../components/header';

class _RegSpecForm extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            current: this.props.query.step || 0,
            status: this.props.query.status || 0,
            user: this.props.user,
            portrait:null,
            target: this.props.user.user,
            attachment: [],
            rules:{}
        }
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    componentWillMount(){
        const _this = this;
        _this.props.dispatch(check_rules(function(res){
            _this.setState({
                rules:res.content
            },function(){
                if(_this.props.user.accessToken){
                    const entry = {id:_this.props.user.user.specialist_id},
                      token = _this.props.user.accessToken;
                    _this.props.dispatch(fetchAttachByEntry(entry,function(res){
                        let initAttach = [],
                          initPortrait = false;
                        _.forEach(res.content,(o,i)=>{
                            if(o.type == 'certificate'){
                                initAttach.push({
                                    url:`${API_URL}attachment/${o.id}?accessToken=${token}`,
                                    thumbUrl:`${API_URL}attachment/${o.id}?accessToken=${token}`,
                                    uid:(i+1)*(-1),
                                    id:o.id,
                                    name:o.name,
                                    status:'done'
                                })
                            }else if(o.type == 'portrait'){
                                initPortrait = {
                                    id:o.id,
                                    url:`${API_URL}attachment/${o.id}?accessToken=${token}`
                                };
                                //_this.props.dispatch(fetchAttachById(o.id,0))
                            }
                        });
                        _this.setState({
                            portrait:initPortrait,
                            attachment:initAttach
                        })
                    },function(){
                        _this.setState({
                            attachment:null,
                            portrait:null
                        })
                    }))
                }
            })
        }))
    }
    componentWillReceiveProps(nextProp){
        if(nextProp.user.accessToken){
            const entry = {id:nextProp.user.user.specialist_id},
              token = nextProp.user.accessToken,
              _this = this;
            _this.props.dispatch(fetchAttachByEntry(entry,function(res){
                let initAttach = [],
                  initPortrait = [];
                _.forEach(res.content,(o,i)=>{
                    if(o.type == 'certificate'){
                        initAttach.push({
                            url:`${API_URL}attachment/${o.id}?accessToken=${token}`,
                            thumbUrl:`${API_URL}attachment/${o.id}?accessToken=${token}`,
                            uid:(i+1)*(-1),
                            id:o.id,
                            name:o.name,
                            status:'done'
                        })
                    }else if(o.type == 'portrait'){
                        initPortrait = {
                            id:o.id,
                            url:`${API_URL}attachment/${o.id}?accessToken=${token}`
                        }
                    }
                });
                _this.setState({
                    user: nextProp.user,
                    attachment:initAttach,
                    portrait:initPortrait
                })
            },function(){
                _this.setState({
                    user: nextProp.user,
                    attachment:null,
                    portrait: null
                })
            }))
        }
    }
    componentDidMount(){
        $('#formContent').height($(window).height()-240);
        $(window).resize(function(){
            $('#formContent').height($(window).height()-240);
        })
    }
    goStep(n){
        this.setState({
            current:n
        })
    };
    getMobile(m){
        this.setState({
            mobile: m
        })
    }
    createDone(o){
        this.setState({
            opts: o
        })
    };
    backToEdit(){
        this.goStep(1);
        this.setState({
            target:this.props.user.user
        })
    }
    renderContent(step){
        switch(step){
            case 0:
                return (
                  <div>
                      <CheckMobBySms
                        dispatch={this.props.dispatch}
                        goStep={this.goStep.bind(this)}
                        rules={this.state.rules}
                        afterSend={this.getMobile.bind(this)}
                      />
                      <SubmitCode
                        dispatch={this.props.dispatch}
                        rules={this.state.rules}
                        goStep={this.goStep.bind(this)}
                        mobile={this.state.mobile}
                      />
                  </div>
                );
            case 1:
                return (
                  <FillInfo
                    dispatch={this.props.dispatch}
                    user = {this.state.user}
                    _target = {this.state.target}
                    goStep={this.goStep.bind(this)}
                    portrait = {this.state.portrait}
                    rules={this.state.rules}
                    attachment = {this.state.attachment}
                  />
                );
            case 2:
                return (
                  <FeedBack
                    backToEdit={this.backToEdit.bind(this)}
                    user = {this.state.user}
                  />
                );
            default:
                return ('....')
        }
    }
    render(){
        const _step = parseInt(this.state.current);
        return(
          <div style={{
                 backgroundColor: '#fff'
                }}>
              <h2 id="accessFormTitle">专家注册</h2>
              <div style={{
                 padding:'10px 40px'
                }}>
                  <Steps current={_step}>
                      <Step title="创建账号" />
                      <Step title="完善个人信息" />
                      <Step title="完成注册申请" />
                  </Steps>
                  <div id="formContent" style={{
                    padding: '40px 0 20px',
                    overflow: 'auto'
                    }}>
                      {this.renderContent(_step)}
                  </div>
              </div>
          </div>
        )
    }
}

const RegSpecForm = connect((state)=>{
    const { query } = state.routing.locationBeforeTransitions,
      {user,portrait,rules} =state.rootReducer ;
    return { query,user,portrait,rules}
})(_RegSpecForm);
export default RegSpecForm